<template>
  <view class="selected-item" :class="children2 ? '' : 'children2'">
    <view
      class="selected-item-data"
      :class="{
        'disable': data.children?.length,
      }"
    >
      <view v-if="data.children?.length">
        {{ data.name }}
      </view>
      <uv-button
        v-else
        :plain="selected ? false : true"
        :custom-style="miniButton"
        @click="handleNodeClick"
        :color="color"
        :text="data.name"
      >
      </uv-button>
    </view>
    <view
      class="selected-item"
      v-for="(item, k) in data.children || []"
      :key="k"
      :class="children ? '' : 'children'"
    >
      <Identifylabelitem
        :data="item"
        :_selected="_selected"
        @handleNodeClick="(e) => $emit('handleNodeClick', e)"
      >
      </Identifylabelitem>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { miniButton } from "@/util/style";
import Identifylabelitem from "./aiidentifylabelitem.vue";
const p = defineProps<{
  data: Eps.identifylabelEntity;
  _selected: Eps.identifylabelEntity[];
}>();
const e = defineEmits(["handleNodeClick"]);

function handleNodeClick() {
  if (!p.data.children?.length) {
    e("handleNodeClick", p.data);
  }
}

const color = computed(() => {
  if (selected.value) {
    return "#FF746F";
  }
  if (p.data.type == 1) {
    return "#999999";
  } else {
    return "red";
  }
});

const selected = computed(() => {
  return !!p._selected.find((c) => c.id == p.data.id);
});

const children = computed(() => {
  return p.data.children?.filter((c: any) => !!c.children?.length).length;
});
const children2 = computed(() => {
  return p.data.children?.filter(
    (c: any) => !!c.children?.filter((c: any) => !!c.children?.length).length
  ).length;
});
</script>

<style scoped lang="scss">
.selected-item {
  padding-left: 24rpx;
  display: flex;
  flex-wrap: wrap;
  min-height: 40rpx;
}

.selected-item-active {
  color: #ff746f;
}

.disable {
  color: #000;
  flex: 0 0 auto;
  width: 100%;
  min-width: 65vw;
  font-weight: 600;
  height: 60rpx;
  line-height: 60rpx;
}

.children2 {
  display: flex !important;
  flex-wrap: wrap;
}

.children {
  margin-bottom: 12rpx;
}
</style>
